<template>
    <a-modal :width="800" v-model:visible="visible" title="请选择识别的关键词" @ok="emits('cancel')">
        <a-checkbox @change='allChecked' v-if="words.length>0" v-model:checked="all">全选</a-checkbox>
        <a-checkbox-group v-model:value="selectWords" style="width: 100%">
            <p class=" my-1" v-for="(item, index) in words" :key="index">
                <a-checkbox :value="item.words">{{ item.words }}</a-checkbox>
            </p>
        </a-checkbox-group>
        <template #footer>
            <a-button class=" bg-white text-black" key="back" @click="emits('cancel')">取消</a-button>
            <a-button @click="confirmSearch" class=" bg-base text-white" key="submit" type="primary">确定</a-button>
        </template>
    </a-modal>
</template>

<script lang='ts' setup>
import { message } from 'ant-design-vue'
let selectWords = ref<string[]>([])
let all = ref<boolean>(false)
const emits = defineEmits(['cancel', 'confirmSearch'])
const props = withDefaults(
    defineProps<{
        show: boolean
        words: { words: string }[]
    }>(),
    {
        show: false,
        words: () => [],
    }
)
let visible = ref<boolean>(false)
watchEffect(() => {
    visible.value = props.show
})
const confirmSearch = () => {
    if (selectWords.value.length == 0) {
        message.warn('请先选择关键词')
    } else {
        let word = ''
        selectWords.value.forEach((item: string) => {
            word += `${item}  \n`
        })
        emits('confirmSearch', word)
    }
}

// 全选
const allChecked = (checkedValue: any) => {
    if (all.value) {
        selectWords.value = props.words.map((item) => {
            return item.words
        })
    } else {
        selectWords.value = []
    }
}
</script>